<template>
  <header class="header">
    <div class="left_msg">
      <div class="dw">
        <img src="../assets/img/dingwei.png" alt="" />
        <!-- <span>山西省&nbsp;&nbsp;怀仁市</span> -->
        <el-cascader
          ref="cascader"
          v-model="localValue"
          :title="localValue"
          :options="options"
          :props="defaultProps"
          change-on-select
          clearable
          @change="selectLocal"
        ></el-cascader>
      </div>
      <div class="msg">
        <img src="../assets/img/icon_edit.png" alt="" />
        <vue-seamless-scroll
          :data="msgList"
          class="msg_warp"
          :class-option="defaultOption"
        >
          <div v-for="(item, index) in msgList" :key="index + getRanddow()">
            <span>{{ item.content }}</span>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="header_title p_c font_2">{{ headerTitle }}</div>
    <div v-if="weather != null" class="right_msg">
      <div class="weather">
        <img
          class="row_left status_img"
          :src="`/img/${weather.wea_img}.png`"
          alt=""
        />
        <span class="row_left">{{ weather.wea }}</span>
        <span class="row_left">温度：{{ weather.tem }} ℃</span>
        <span class="row_left">风向：{{ weather.win }}</span>
        <div :class="['row_left', 'air', getWeatherClass]">
          空气：{{ getWeatherText }}
        </div>
      </div>
      <div class="date">
        <span class="row_left">{{ weather.week }}</span>
        <span class="row_left">{{ time }}</span>
      </div>
    </div>
  </header>
</template>

<script>
import { getWeather } from "@/api/common.js";
import sxTreeData from "@/assets/json/sx_tree";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      msgList: [
        {
          content:
            "政策通知：电商不仅可以帮助群众脱贫，而且还能助推乡村振兴，大有可为！---------习近平",
        },
        {
          content: "名人名言：先天下之忧而忧,后天下之乐而乐。---------范仲淹",
        },
        {
          content: "度尽劫波兄弟在,相逢一笑泯恩仇。---------鲁迅",
        },
      ],
      // weather: {
      //   temperature: "20℃",
      //   status: "多云",
      //   windDirection: "东南风",
      //   air: "优",
      // },
      weather: null,
      time: "",
      timer: null,
      options: [],
      localValue: ["山西省", "朔州市", "怀仁市"],
      defaultProps: {
        value: "label",
        label: "label",
        checkStrictly: true,
      },
      headerTitle: "乡村e镇数据中心",
    };
  },
  computed: {
    defaultOption() {
      return {
        step: 0.05,
        limitMoveNum: 2,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000,
      };
    },
    getWeatherText() {
      if (this.weather.air <= 50) {
        return "优";
      } else if (this.weather.air > 50 && this.weather.air <= 100) {
        return "良";
      } else if (this.weather.air >= 101 && this.weather.air <= 150) {
        return "轻度污染";
      } else if (this.weather.air >= 151 && this.weather.air <= 200) {
        return "中度污染";
      } else if (this.weather.air >= 201 && this.weather.air <= 300) {
        return "重度污染";
      } else if (this.weather.air >= 301 && this.weather.air <= 500) {
        return "严重污染";
      } else {
        return "未知";
      }
    },
    getWeatherClass() {
      if (this.weather.air <= 50) {
        return "air_y";
      } else if (this.weather.air > 50 && this.weather.air <= 100) {
        return "air_l";
      } else if (this.weather.air >= 101 && this.weather.air <= 150) {
        return "air_qd";
      } else if (this.weather.air >= 151 && this.weather.air <= 200) {
        return "air_zd";
      } else if (this.weather.air >= 201 && this.weather.air <= 300) {
        return "air_ZD";
      } else if (this.weather.air >= 301 && this.weather.air <= 500) {
        return "air_yz";
      } else {
        return "未知";
      }
    },
  },
  mounted() {
    this.getWeatherFun();
    this.dateShow();
    // this.initOption();
    this.regionTreeSelectFun();
  },
  beforeDestroy() {
    this.dataDestroy();
  },
  watch: {
    localValue(newV) {
      this.getWeatherFun();
    },
  },
  methods: {
    getRanddow() {
      let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      arr.sort(function () {
        return 0.5 - Math.random();
      });
      return +new Date() + arr;
    },
    selectLocal(e) {
      let nodeObj = this.$refs["cascader"].getCheckedNodes()[0].data;
      if (nodeObj.geom != null) {
        let data = {
          geom: nodeObj.geom,
          name: nodeObj.label,
          center: nodeObj.lonlat,
        };
        this.$store.commit("SET_MAP_GEOM", data);
      }
    },
    regionTreeSelectFun() {
      this.options = sxTreeData;
      this.$store.commit("SET_REGON_TREE", sxTreeData);
    },
    initOption() {
      sxData.districts.forEach((province) => {
        let provices = {
          value: province.name,
          label: province.name,
          children: [],
        };
        province.districts.forEach((city) => {
          let citys = {
            value: city.name,
            label: city.name,
            children: [],
          };
          city.districts.forEach((county) => {
            let countys = {
              value: county.name,
              label: county.name,
            };
            citys.children.push(countys);
          });
          provices.children.push(citys);
        });
        this.options = [provices];
      });
    },
    getWeatherFun() {
      if (this.localValue.length == 0) return;
      if (this.localValue.length == 1) return;
      let city = this.localValue[this.localValue.length - 1];
      let lastName = city[city.length - 1];
      // 如果含有市，需要把市这个字去掉
      if (lastName == "市") {
        city = city.slice(0, city.length - 1);
      }
      // 如果含区，则返回上一级
      if (lastName == "区") {
        city = this.localValue[1].slice(0, city.length - 1);
      }
      let params = {
        appid: "85361836",
        appsecret: "By0B7GqY",
        unescape: 1,
        city: city,
      };
      getWeather(params).then((res) => {
        if (res?.errcode == 100) {
          return;
        }
        this.weather = res;
      });
    },
    dataDestroy() {
      if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
      }
    },
    dateShow() {
      this.timer = setInterval(() => {
        this.dateFormat();
      }, 1000);
    },
    dateFormat() {
      let date = new Date();
      let year = date.getFullYear();
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      this.time =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 118px;
  background-image: url("../assets/img/title.png");
  background-size: 100% 100%;
  position: relative;

  .header_title {
    background: linear-gradient(0deg, #4ab6fb 0%, #ffffff 63%);
    font-size: 30px;
    font-weight: 700;
    font-style: italic;
    text-align: left;
    color: transparent;
    letter-spacing: 23px;
    display: inline-block;
    -webkit-background-clip: text;
    margin-top: -8px;
  }
  .left_msg {
    position: absolute;
    top: 35px;
    left: 6px;
    width: 1311px;
    height: 51px;
    background-image: url("../assets/img/zuoshang.png");
    background-size: cover;
    display: flex;
    .dw {
      // width: 162px;
      height: 28px;
      margin-left: 43px;
      margin-top: 15px;
      background-image: url("../assets/img/dw_box2.png");
      background-size: cover;
      display: flex;
      align-items: center;
      img {
        height: 18px;
        width: auto;
        margin-left: 10px;
      }
      span {
        font-size: 14px;
        color: #fff;
        margin-left: 15px;
      }
    }
    .msg {
      margin-left: 20px;
      display: flex;
      align-items: center;
      color: #f65904;
      margin-top: 8px;
      font-size: 12px;
      .msg_warp {
        height: 15px;
        width: 100%;
        overflow: hidden;
        text-align: left;
      }
      img {
        height: 20px;
        width: auto;
      }
      span {
        margin-left: 10px;
      }
      .animate_box {
        overflow: hidden;
        width: 90%;
        margin-left: 10px;
      }
    }
    .animate {
      display: inline-block;
      white-space: nowrap;
      animation: 10s wordsLoop linear infinite normal;
    }
    @keyframes wordsLoop {
      0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }
    @-webkit-keyframes wordsLoop {
      0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }
  }
  .right_msg {
    position: absolute;
    top: 35px;
    right: 6px;
    width: 1131px;
    height: 51px;
    background-image: url("../assets/img/youshang.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    color: #fff;
    font-size: 14px;
    padding-top: 5px;
    .row_left {
      margin-left: 15px;
    }
    .weather {
      display: flex;
      align-items: center;
      margin-right: 40px;

      .status_img {
        width: 30px;
        height: auto;
      }
      .air {
        min-width: 56px;
        height: 20px;
        box-sizing: content-box;
        padding: 2px 4px;
        color: #fff;
      }
      .air_y {
        color: #01fea9;
        background: #027996;
      }
      .air_l {
        background: #ffe401;
        color: #000;
      }
      .air_qd {
        background: #ff7e01;
      }
      .air_zd {
        background: #fe0000;
      }
      .air_ZD {
        background: #97004b;
      }
      .air_yz {
        background: #82012a;
      }
    }
    .date {
      margin-right: 70px;
    }
  }
}
</style>